<template>
	<view class="custom-popup-container" v-if="visible">
		<view class="custom-popup-mask" @click="closePopup"></view>
		<view class="custom-popup-box">
			<view class="date-picker-popup">
				<view class="date-picker-header">
					<text class="date-picker-title">选择日期</text>
				</view>
				
				<view class="month-selector">
					<view class="previous-month" @tap="previousMonth">
						<text class="arrow">〈</text>
					</view>
					<view class="current-month">
						<text>{{currentYear}}年{{currentMonth + 1}}月</text>
					</view>
					<view class="next-month" @tap="nextMonth">
						<text class="arrow">〉</text>
					</view>
				</view>
				
				<view class="weekdays">
					<text class="weekday" v-for="day in weekdays" :key="day">{{day}}</text>
				</view>
				
				<view class="calendar">
					<view class="days">
						<view class="day-wrapper" v-for="(day, index) in displayDays" :key="index">
							<view 
								class="day" 
								:class="{
									'previous-month-day': day.month === 'prev',
									'next-month-day': day.month === 'next',
									'selected': isSelectedDate(day),
									'today': isToday(day)
								}"
								@tap="selectDate(day)"
							>
								<text class="day-text">{{day.number}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="date-picker-footer">
					<view class="date-picker-action" @tap="resetToToday">今天</view>
					<view class="date-picker-action primary" @tap="confirmSelection">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DatePicker",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			value: {
				type: Date,
				default: () => new Date()
			}
		},
		data() {
			return {
				weekdays: ['日', '一', '二', '三', '四', '五', '六'],
				currentYear: new Date().getFullYear(),
				currentMonth: new Date().getMonth(),
				selectedDate: null,
				displayDays: [],
				lastCalendarKey: null
			}
		},
		watch: {
			visible(val) {
				if (val) {
					// 当弹窗显示时，初始化日期为传入的值
					const date = new Date(this.value);
					this.currentYear = date.getFullYear();
					this.currentMonth = date.getMonth();
					this.selectedDate = new Date(date);
					this.updateCalendar();
				}
			}
		},
		mounted() {
			// 初始化选中日期为传入的值
			this.selectedDate = new Date(this.value);
			this.updateCalendar();
		},
		methods: {
			closePopup() {
				this.$emit('update:visible', false);
			},
			
			updateCalendar() {
				const calendarKey = `${this.currentYear}-${this.currentMonth}`;
				if (this.lastCalendarKey === calendarKey && this.displayDays.length > 0) {
					return;
				}
				
				this.lastCalendarKey = calendarKey;
				const days = [];
				
				// 获取当月第一天是星期几
				const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
				
				// 获取当月有多少天
				const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
				
				// 获取上个月有多少天
				const daysInPrevMonth = new Date(this.currentYear, this.currentMonth, 0).getDate();
				
				// 添加上个月的日期
				for (let i = 0; i < firstDay; i++) {
					days.push({
						year: this.currentMonth === 0 ? this.currentYear - 1 : this.currentYear,
						month: this.currentMonth === 0 ? 11 : this.currentMonth - 1,
						number: daysInPrevMonth - firstDay + i + 1,
						month_status: 'prev'
					});
				}
				
				// 添加当月的日期
				for (let i = 1; i <= daysInMonth; i++) {
					days.push({
						year: this.currentYear,
						month: this.currentMonth,
						number: i,
						month_status: 'current'
					});
				}
				
				// 计算还需要添加几天下个月的日期以填满6行7列
				const nextMonthDays = 42 - days.length;
				
				// 添加下个月的日期
				for (let i = 1; i <= nextMonthDays; i++) {
					days.push({
						year: this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear,
						month: this.currentMonth === 11 ? 0 : this.currentMonth + 1,
						number: i,
						month_status: 'next'
					});
				}
				
				this.displayDays = days;
			},
			
			previousMonth() {
				if (this.currentMonth === 0) {
					this.currentYear--;
					this.currentMonth = 11;
				} else {
					this.currentMonth--;
				}
				this.updateCalendar();
			},
			
			nextMonth() {
				if (this.currentMonth === 11) {
					this.currentYear++;
					this.currentMonth = 0;
				} else {
					this.currentMonth++;
				}
				this.updateCalendar();
			},
			
			selectDate(day) {
				this.selectedDate = new Date(day.year, day.month, day.number);
			},
			
			isSelectedDate(day) {
				if (!this.selectedDate) return false;
				
				return (
					day.year === this.selectedDate.getFullYear() &&
					day.month === this.selectedDate.getMonth() &&
					day.number === this.selectedDate.getDate()
				);
			},
			
			isToday(day) {
				const today = new Date();
				return (
					day.year === today.getFullYear() &&
					day.month === today.getMonth() &&
					day.number === today.getDate()
				);
			},
			
			resetToToday() {
				const today = new Date();
				this.currentYear = today.getFullYear();
				this.currentMonth = today.getMonth();
				this.selectedDate = new Date(today);
				this.updateCalendar();
			},
			
			confirmSelection() {
				if (this.selectedDate) {
					this.$emit('input', this.selectedDate);
					this.$emit('confirm', this.selectedDate);
					this.closePopup();
				}
			}
		}
	}
</script>

<style scoped>
	/* 自定义弹窗样式 */
	.custom-popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.custom-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.custom-popup-box {
		width: 343px;
		position: relative;
		z-index: 1000;
		border-radius: 16px;
		overflow: hidden;
	}
	
	/* 日期选择器样式 */
	.date-picker-popup {
		width: 100%;
		border-radius: 16px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.date-picker-header {
		text-align: center;
		padding-bottom: 20rpx;
	}
	
	.date-picker-title {
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.month-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.previous-month, .next-month {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	
	.arrow {
		font-size: 36rpx;
		color: #666;
	}
	
	.current-month {
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.weekdays {
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
	}
	
	.weekday {
		width: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}
	
	.calendar {
		margin-bottom: 20rpx;
	}
	
	.days {
		display: flex;
		flex-wrap: wrap;
	}
	
	.day-wrapper {
		width: calc(100% / 7);
		padding: 8rpx 0;
		box-sizing: border-box;
	}
	
	.day {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		border-radius: 50%;
		cursor: pointer;
	}
	
	.day-text {
		font-size: 26rpx;
	}
	
	.previous-month-day, .next-month-day {
		color: #ccc;
	}
	
	.selected {
		background-color: #4080ff;
		color: white;
	}
	
	.today:not(.selected) {
		border: 1px solid #4080ff;
	}
	
	.date-picker-footer {
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
	}
	
	.date-picker-action {
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		cursor: pointer;
		border-radius: 4rpx;
	}
	
	.date-picker-action.primary {
		background-color: #4080ff;
		color: white;
	}
</style> 